<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left title">
        意见箱<i class="el-icon-loading" v-if="loading"></i>
      </span>
      <el-button type="primary" size="small" @click="doModify('add')" v-if="hasPerm('feedback:feedback:edit')">
        发表意见
      </el-button>
    </div>
    <div class="common-bot" v-if="tableData.length && hasPerm('feedback:feedback:list')">
      <el-table :data="tableData" style="width: 100%">
        <!--        <el-table-column prop="id" label="ID">-->
        <!--          <template slot-scope="scope">-->
        <!--            <Briefly :value="''+scope.row.id" :length="10"/>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column prop="name" label="反馈内容">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建人" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.creator">{{ scope.row.creator.name }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作" width="150"
          v-if="hasPerm('feedback:feedback:edit', 'feedback:feedback:del')">
          <template slot-scope="scope">
            <el-link class="left3px" type="primary" @click.stop="doModify('edit', scope.row)"
                     v-if="hasPerm('feedback:feedback:edit') && isMyData(scope.row.createBy)">
              编辑
            </el-link>
            <el-link class="left3px" type="danger" @click.stop="doModify('del', scope.row)"
                     v-if="hasPerm('feedback:feedback:del') && isMyData(scope.row.createBy)">
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" v-if="tableData.length">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"></el-pagination>
      </div>
    </div>
    <Modify
      ref="modify"
      @close="close"/>
    <el-empty style="margin-top: 200px" description="还没有任何意见" v-if="!tableData.length && !loading">
    </el-empty>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import Api from "@/api/index";
import Briefly from "@/layout/components/Briefly";
import Modify from "./modify.vue";

export default {
  components: {Briefly, Modify},
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      showPage: false,
      tableData: [],
      enable: 0,
      keyword: "",
      limit: 10,
      nowPage: 1,
      roleGroupId: 0,
      gender: {
        female: "女",
        male: "男",
      },
      totalElement: 0,
      loading: false,
    };
  },
  watch: {
    nowPage(val) {
      this.getData();
      this.setStateData(val);
    },
    limit(val) {
      this.getData();
    },
  },
  methods: {
    close() {
      this.getData();
    },
    //
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    doModify(type, item = null) {
      switch (type) {
        case "add":
          this.$refs.modify.show();
          break;
        case "edit":
          this.$refs.modify.show(item.id)
          break;
        case "del":
          this.$confirm("确认此操作?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            Api.sysFeedback.del({targetIds: [item.id]}).then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.getData();
              }
            });
          })
            .catch((e) => this.getData());
          break;
      }
    },
    toModify(type) {
      this.$router.push({name: "managerModify", query: {type}});
    },
    getData() {
      this.loading = true;
      Api.sysFeedback.list({
        limit: this.limit,
        page: this.nowPage - 1
      }).then((res) => {
        // console.log(res.data, 333);
        this.tableData = res.data;
        this.totalElement = res.total;
        this.showPage = true;
        this.loading = false;
      }).catch(e => this.loading = false);
    },
  },
  mounted() {
    if (this.$route.query.stateData) {
      console.log(JSON.parse(this.$base64.decode(this.$route.query.stateData)));
      const stateData = JSON.parse(
        this.$base64.decode(this.$route.query.stateData)
      );
      this.nowPage = stateData.nowPage;
      this.getData();
    } else {
      this.getData();
    }
  },
};
</script>

<style lang="scss" scoped>
.left3px {
  margin-left: 3px;
}
</style>
